<template>
  <div class="app-container">
    <!--			查询表头-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input placeholder="请输入姓名" v-model="UserInfoParameter.userName"></el-input>
      </el-form-item>

      <el-form-item label="电话号码">
        <el-input placeholder="请输入电话号码" v-model="UserInfoParameter.phone"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="success" @click="queryData">查询</el-button>
        <el-button type="success" @click="reset">重置</el-button>
        <el-button type="success" @click="addUser">新增</el-button>
        <el-button type="warning" @click="outPut">导出</el-button>
<!--        <el-button icon="el-icon-upload" type="info" @click="dialogVisible=true">导入</el-button>-->
      </el-form-item>


      <el-dialog
        title="数据字典导入"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <el-form>
          <el-form-item label="请选择Excel文件">
            <el-upload
              :auto-upload="true"
              :multiple="false"
              :limit="1"
              :on-exceed="fileUploadExceed"
              :on-success="fileUploadSuccess"
              :on-error="fileUploadError"
              :action="importUrl"
              name="file"
              accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
            >
              <!--accept 只接受某种格式的文件-->
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
        </div>
      </el-dialog>
    </el-form>
    <!--	table 标签-->

    <el-table border :data="list" style="width:100%">
      <!--		表示一列 循环输出标签的内容-->
      <el-table-column label="编号" prop="userId"></el-table-column>
      <el-table-column label="姓名" prop="userName"></el-table-column>
      <el-table-column label="密码" prop="password"></el-table-column>
      <el-table-column label="权限" prop="roleId" :formatter="roleFormatter"></el-table-column>
      <el-table-column label="年龄" prop="age"></el-table-column>
      <el-table-column label="电话" prop="phone"></el-table-column>
      <el-table-column label="邮箱" prop="email"></el-table-column>
      <el-table-column label="地址" prop="address"></el-table-column>
      <!--		操作按钮-->
      <el-table-column label="操作">
        <template slot-scope="x">
          <el-button type="warning" @click="update(x.row)">修改</el-button>
          <el-button type="danger" @click="del(x.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!-- 修改- 对话框组件 -->
    <el-dialog :visible.sync="updateShow" width="30%" title="用户信息修改">
      <el-form label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="updateForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="updateForm.age"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="updateForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="updateForm.email"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="updateForm.address"></el-input>
        </el-form-item>
        <!--        <el-form-item label="职务">-->
        <!--          <el-select v-model="updateForm.job">-->
        <!--            <el-option label="经理" value="经理"></el-option>-->
        <!--            <el-option label="管理" value="管理"></el-option>-->
        <!--            <el-option label="组长" value="组长"></el-option>-->
        <!--            <el-option label="员工" value="员工"></el-option>-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="邮箱">-->
        <!--          <el-input v-model="updateForm.email"></el-input>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="电话">-->
        <!--          <el-input v-model="updateForm.phone"></el-input>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="人员状态">-->
        <!--          <el-select v-model="updateForm.state">-->
        <!--            <el-option label="在职" value="经理"></el-option>-->
        <!--            <el-option label="离职" value="管理"></el-option>-->
        <!--            <el-option label="兼职" value="组长"></el-option>-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->

        <el-form-item>
          <el-button type="success" size="mini" @click="updateUser">修改</el-button>
          <el-button type="success" size="mini" @click="updateShow=false">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 新增- 对话框组件 -->
    <el-dialog :visible.sync="addShow" width="30%" title="新增用户信息">
      <el-form label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="addForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="addForm.age"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="addForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="addForm.email"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="addForm.address"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" size="mini" @click="saveUser">新增</el-button>
          <el-button type="success" size="mini" @click="addShow=false">关闭</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>
  </div>
</template>

<script>
import {update, userList, add, deleteUser, outputUser, inputFile} from '@/api/role'

export default {
  data() {
    return {
      importUrl: 'http://localhost:9999/user/file-input',
      dialogVisible: false,
      UserInfoParameter: {//查询数据；创建对象，参数和后端命名相同
        userName: "",
        sex: ""
      },
      // 新增
      addForm: {
        //新增用户时接口中输入的参数,定义完后和表单绑定
        name: "", age: "", sex: "", birth: "", edcation: "", section: "", job: "",
        email: "", phone: "", state: "", password: ""
      },
      addShow: false,//新增用户弹窗控制变量
      // 修改
      updateForm: {
        //新增用户时接口中输入的参数,定义完后和表单绑定
        name: "", age: "", sex: "", birth: "", edcation: "", section: "", job: "",
        email: "", phone: "", state: "", password: "", userId: "",
      },
      updateShow: false,

      // 定义数组，接受返回值
      list: []
    }
  },
  methods: {
    fileUploadExceed() {
      this.$message.warning('只能选取一个文件')
    },
    //上传失败回调
    fileUploadError(error) {
      this.$message.error('数据导入失败')
    },
    //上传成功回调
    fileUploadSuccess(response) {
      if (response.code === 0) {
        this.$message.success('数据导入成功')
        this.dialogVisible = false
      } else {
        this.$message.error(response.message)
      }
    },
    outPut() {
      console.log("导出成功");
      outputUser().then(res => {
        console.log(res);
      })
    },
    roleFormatter(row, column, cellValue) {
      return row.roleId == '0' ? '普通客户' : 'VIP客户';
    },
    getList() {
      userList().then(res => {
        console.log(res)
        this.list = res.data;
      })
    },
    // 修改函数
    updateUser() {
      update(this.updateForm).then(res => {
        if (res.code == 200) {
          this.updateShow = false;
          this.queryData();
        }
      })
    },
    update(x) {
      this.updateShow = true;
      this.updateForm = x;
    },

    //删除
    del(x) {
      const is = confirm("你确定删除数据吗？");
      if (is) {//确定删除,则删除
        let data = {userId: x.userId}
        deleteUser(data).then(res => {
          alert(res.msg);
          if (res.code == 200) {
            //    刷新数据，将新增数据输出界面
            this.queryData();
          }
        })
      } else {
        alert("取消删除");
      }
    },

    //保存数据
    saveUser() {// 新增信息
      add(this.addForm).then(res => {
        alert(res.msg);
        if (res.code == 200) {
          this.queryData();
          this.addShow = false;
          this.addForm = ''
        }
      })

    },
    addUser() {//新增用户，利用dailog弹窗
      this.addShow = true;
    },

    reset() {
      // 重置函数
      this.UserInfoParameter.userName = "";
      this.UserInfoParameter.phone = "";
      this.queryData();
    },

    // 查询用户
    queryData() {
      let obj = {};
      obj.userName = this.UserInfoParameter.userName;
      obj.phone = this.UserInfoParameter.phone;

      userList(obj).then(res => {
        if (res.code == 200) {
          this.list = res.data;
        } else {
          this.list = [];
          alert(res.msg)
        }
      })
    }
  },
  // 生命周期函数。用于决定页面开始时，执行查询函数，也叫钩子函数，钩子，浏览器加载完html元素和Js、css后执行的函数
  mounted() {
    //运行查询函数
    this.queryData()//官方定义 var vv = new Vue(),但省略，this 可代替 vv
  }
}
</script>

<style scoped>
.line {
  text-align: center;
}
</style>

